@import "../sass/base.scss";

.categories {
    padding: 1.15rem .24rem;
    // 头部
    .header {
        position: fixed;
        overflow: visible;
        top: 0;
        left: 0;
        width: 100%;
        // 搜索
        .top-bar {
            overflow: hidden;
            width: 100%;
            height: .8rem;
            font-size: .32rem;
            color: $c-2a;
            padding: .2rem .24rem;
            z-index: 9;
            background: white;
            .goback {
                height: 1.05rem;
                width: 1rem;
                background: url("../images/icon/icon_16.png") no-repeat;
                background-size: .16rem .32rem;
                background-position: .24rem center;
            }
            .search {
                width: 4.4rem;
                height: .62rem;
                border-radius: .31rem;
                background: #FBFBFB;
                .icon {
                    margin: 0 .24rem;
                    width: .24rem;
                    height: .24rem;
                    background: url("../images/icon/iocn_1.png") no-repeat;
                    background-size: 100% 100%;
                }
                input {
                    flex: 1;
                    padding: .15rem 0;
                    outline: none;
                    border: none;
                    background: none;
                    font-size: .26rem;
                    color: $c-99;
                }
                input::-webkit-input-placeholder{
                    color: $c-99;
                }
            }
        }
        // 一二级分类
        .nav-wrapper {
            height: .7rem;
            white-space: nowrap;
            position: relative;
            // 一级分类
            .nav-bar1-wrapper{
                height: .7rem;
                background: $c-ffba17;
                overflow-y: hidden;
                .nav-bar1 {
                    overflow-x: scroll;
                    line-height: .7rem;
                    padding: 0 .24rem;
                    height: 1rem;
                    font-size: .26rem;
                    font-family: $f-Bold;
                    color: white;
                    span {
                        display: inline-block;
                        width: 1.8rem;
                        text-align: center;
                        &.all{
                            padding:0 .8rem 0 0;
                            text-align: left;
                            width: 1.5rem;
                        }
                        &.active{
                            font-size: .28rem;
                            font-weight: bold;
                        }
                    }
                    &:-webkit-scrollbar {    
                        width: 0px;
                        display: none;
                      }
                }
            }
            // 二级分类
            .nav-bar2-wrapper{
                position: absolute;
                top:100%;
                left: 0;
                width: 100%;
                height: 0;
                opacity: 0;
                visibility: hidden;
                transition: all .5s;
                background: white;
                font-size: .26rem;
                overflow: hidden;
                background: url("../images/index/bj_1.png") no-repeat;
                background-size:100%;
                .nav-bar2{
                    height: 1.2rem;
                    overflow-x: scroll;
                    white-space: nowrap;
                    padding: .18rem .24rem;
                    span{
                        display: inline-block;
                        height:.49rem;
                        width: 1.52rem;
                        line-height: .49rem;
                        text-align: center;
                        color: $c-99;
                        border-radius: .25rem;
                        border: 1px solid $c-99;
                        margin-right: .25rem;
                        &.active{
                            border-color: $c-ffba17;
                            color: $c-ffba17;
                        }
                    }
                }
            }
            //显示二级分类
            &.show2{
                .nav-bar2-wrapper{
                    height: .88rem;
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }

    // 产品列表
    .list {
        margin-top: .5rem;
        .wrapper{
            flex-wrap: wrap;
            .card,.card2{
                width: 3.4rem;
                margin-top: .3rem;
                background: $c-fb;
                border-radius: $radius-10;
                overflow: hidden;
                font-family: $f-Medium;
                color: $c-33;
                &:nth-of-type(even){
                    margin-left: .18rem;
                }
                .pic{
                    display: block;
                    height: 2.7rem;
                }
                .bottom{
                    padding: .2rem;
                    .text{
                        flex: 1;
                        overflow: hidden;
                        font-size: .26rem;
                    }
                    .add{
                        width: .4rem;
                        height: .4rem;
                        border-radius: .2rem;
                        background: url("../../static/images/index/iocn_3.png");
                        background-size: 100% 100%;
                    }
                }
            }
            .card2{
                width: 100%;
                .pic{
                    height: 2.38rem;
                }
                .bottom {
                    padding: .24rem .2rem;
               }
            }
        }
    } 
    
    //弹窗
    .size-wrapper{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 99;
        overflow: hidden;
        visibility: hidden;
        background: rgba(0,0,0,0.2);
        opacity: 0;
        transition: all .5s;
        .content{
            padding: .66rem .2rem 1rem .2rem;
            height: 6.78rem;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: url("../images/index/bj.png") no-repeat;
            background-size: 100% 100%;
            transform: translate3d(0,100%,0);
            transition: all .5s;
            .top-bar{
                font-family: $f-Bold;
                font-size: .26rem;
                color: $c-33;
                font-weight: bold;
                padding: 0 .28rem .2rem .1rem;
                .close{
                    display: block;
                    width: .26rem;
                    height: .26rem;
                    background: url('../images/icon/icon_14.png') no-repeat;
                    background-size: 100%;
                }
            }
            .icon{
                z-index: 99;
                .left{
                    height: 1.7rem;
                    width: 3.31rem;
                    border-radius: $radius-10;
                    background: url("../images/index/img_7.png");
                    background-size: 100%;
                }
                .toCart{
                    z-index: 9;
                    animation: toCart 1s ease-in-out ;
                }
                .right{
                    height: 1.7rem;
                    width: 3.31rem;
                    font-family: $f-Regular;
                    font-size: .24rem;
                    color: $c-33;
                    padding: .1rem 0;
                    p{
                        padding: 0 .52rem;
                        background-position: left center;
                        background-repeat: no-repeat;
                       &:nth-child(1){
                           background-image: url("../images/icon/icon_11.png");
                           background-size: .28rem .28rem;
                       }
                       &:nth-child(2){
                        background-image: url("../images/icon/icon_13.png");
                        background-size: .22rem .30rem;
                       }
                       &:nth-child(3){
                        background-image: url("../images/icon/icon_12.png");
                        background-size: .26rem .29rem;
                      }
                    }                    
                }

            }
            .size-box{
                >div{
                    flex-wrap: wrap;
                }
                .title{
                    font-family: $f-Bold;
                    font-size: .26rem;
                    color: $c-33;
                    font-weight: bold;
                    padding:  .33rem 0;
                }
                .radio-label{
                    display: block;
                    text-align: center;
                    color: $c-33;
                    font-size: .26rem;
                    font-family: $f-Regular;
                    margin-bottom: .3rem;
                    input[type='radio']{
                        position: absolute;
                        left: -9999rem;
                    }
                    .size-checked{
                        display: block;
                        height: .65rem;
                        width: 3.35rem;
                        background: $c-fa;
                        border-radius: .32rem;
                        line-height: .65rem;
                    }
                    input[type='radio']:checked + span{
                        color: white;
                        background: $c-ffba17;
                        animation: scaleSize .5s;
                    }
                }
                
            }
            .bottom-bar{
                z-index: 0;
            }
            
        }
        
    }
    //弹窗动画类
    .show{
        opacity: 1;
        visibility: visible;
        .content{
            transform: translate3d(0,0,0);
        }
    }
    .scaleCount{
        animation: scaleCount .5s .7s;
    }
    @keyframes toCart {
        0%,100%{
            transform: none;
        }
        15%{
            transform: scale(0.7);
        }
        70%{
            opacity: 1;          
            transform: translate3d(-1.2rem,4.2rem,0) scale(0.2);   
        }
        83%{
            opacity: 0;
            transform: translate3d(-1.3rem,4.3rem,0) scale(0.1);               
        }
        84%{
            opacity: 0;
            transform: translate3d(0,0,0)  scale(0.5);            
        }
        85%{
            opacity: 1;
            transform: translate3d(0,0,0)  scale(0.6);
        }
       
    }
    @keyframes scaleCount {
        50%{ transform: scale3d(1.5,1.5,1)}
    }
    @keyframes scaleSize{
        50%{
            transform: scale3d(1.05,1.05,1);
        }
    }
}